<link rel="stylesheet" href="../css/goodlist.css">
<link rel="stylesheet" href="../components/swiper/dist/css/swiper.css">
<script src="../components/swiper/dist/js/swiper.jquery.js"></script>
<div class="index-box">

    <!---------------------------------hello---------------------------------------->
    <div class="hello">
        <div class="index-heademidl">
            <div class="index-headlogo fl" style="background-image:url(../images/index/logo52.png)" >
            </div>
            <div class="index-headlogofont fl">
                <span class="index-headlogofont1">这一刻只因分享</span>
                <span class="index-headlogofont2">At this moment, For sharing</span>
            </div>
        </div>

    </div>
    <!----------------------------------------swiper----------------------------->
    <div class="swiper-container">
        <div class="swiper-wrapper inner-banner">
            <a class="swiper-slide" href="http://www.5kcake.com/goodDetails/26604c9e-3d18-4748-a095-f5f6cf9a25fc" style="background-image: url(../images/goodslist/main.jpg);
        width:414px;"></a>

        </div>
        <div class="swiper-pagination">

        </div>
    </div>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            autoplay:3000,//可选选项，自动滑动
            loop:true,
            pagination:".swiper-pagination"/*分页器*/

        })
    </script>
    <!----------------------main------------------------------------------->
    <div class="mainbox" >
        <div class="main" id="1">
            <a class="top clearfix"  ui-sref="category({type:'naiyou'})">
                <div class="title fl">乳脂奶油&巧克力蛋糕</div>
                <div class="more fr">更多</div>
            </a>
            <div class="products clearfix">
                <a class="probox" href="" ng-repeat="item in List|filter:{'type':'naiyou'}" ui-sref="detail({title:'{{item.title}}'})">
                    <div class="proming" >
                        <img ng-src="../images/goodsList/{{item.imgSrc}}" alt="" width="100%" height="100%">
                    </div>

                    <div class="wenzibox">
                        <span class="name">{{item.title}}</span>
                        <span class="price">￥{{item.price}}</span>
                    </div>
                </a>

            </div>
        </div>
        <div class="main" id="2">
            <a class="top clearfix"  ui-sref="category({type:'qianceng'})">
                <div class="title fl">千层蛋糕&拿破仑</div>
                <div class="more fr">更多</div>
            </a>
            <div class="products clearfix">

                <a class="probox" href="" ng-repeat="item in List|filter:{'type':'qianceng'}" ui-sref="detail({title:'{{item.title}}'})">
                    <div class="proming" >
                        <img ng-src="../images/goodsList/{{item.imgSrc}}" alt="" width="100%" height="100%">
                    </div>
                    <div class="wenzibox">
                        <span class="name">{{item.title}}</span>
                        <span class="price">￥{{item.price}}</span>
                    </div>
                </a>

            </div>
        </div>
        <div class="main" id="3">
            <a class="top clearfix" ui-sref="category({type:'zhishi'})">
                <div class="title fl">芝士&慕斯蛋糕</div>
                <div class="more fr">更多</div>
            </a>
            <div class="products clearfix">

                <a class="probox" href="" ng-repeat="item in List|filter:{'type':'zhishi'}" ui-sref="detail({title:'{{item.title}}'})">
                    <div class="proming" >
                        <img ng-src="../images/goodsList/{{item.imgSrc}}" alt="" width="100%" height="100%">
                    </div>
                    <div class="wenzibox">
                        <span class="name">{{item.title}}</span>
                        <span class="price">￥{{item.price}}</span>
                    </div>
                </a>

            </div>
        </div>
        <div class="main" id="4">
            <a class="top clearfix" ui-sref="category({type:'jingpin'})">
                <div class="title fl">精品法式</div>
                <div class="more fr">更多</div>
            </a>
            <div class="products clearfix">

                <a class="probox" href="" ng-repeat="item in List|filter:{'type':'jingpin'}" ui-sref="detail({title:'{{item.title}}'})">
                    <div class="proming">
                        <img ng-src="../images/goodsList/{{item.imgSrc}}" alt="" width="100%" height="100%">
                    </div>
                    <div class="wenzibox">
                        <span class="name">{{item.title}}</span>
                        <span class="price">￥{{item.price}}</span>
                    </div>
                </a>

            </div>
        </div>
    </div>
<!--------------------------------------box------------------------------------------>
    <div class="float-left">
        <div class="sidebar">
            <a href="" class="cake">
                <span class="logo"></span>
                <span class="cakewz">冰慕流心</span>
            </a>
        </div>
        <div class="toleft"></div>
    </div>
    <script>
        $(function () {
            var flag = true;
            $('.toleft').click(function () {
                if(flag){
                    $('.float-left').animate({'left':'0'},500);
                    $('.toleft').css({'background':'url(../images/index/logo7.png) no-repeat left center',
                        'background-size': '0.45rem'});
                    setTimeout(function () {
                        flag=false;
                    },1000)
                }
                if(!flag){
                    $('.float-left').animate({'left':'-1.75rem'},500);
                    $('.toleft').css({'background':'url(../images/index/logo8.png) no-repeat left center',
                        'background-size': '0.45rem'});
                    flag=true;
                }
            })

        });
//        $(document.readyState=function(){
//            var i=0;
//            $(".toleft").mouseover(function(){
//                i++;
//                if(i%2){
//                    $(".floatLeft").animate({"left":"-1.7rem"},300)
//                    $(".toleft").css('background','url(../images/index/logo8.png) no-repeat left center').css('background-size','0.45rem')
//                }else{
//                    $(".floatLeft").animate({"left":"0"},300)
//                }
//
//
//            })
//        })

    </script>
    <div class="fix-right">
        <span class="hid-span"></span>
        <span></span>
        <span><i></i></span>
    </div>
    <script>
        $(function () {
            var windowH = $(window).height();
            scrollTop = $(window).scrollTop();
            $(window).scroll(function () {
                scrollTop = $(window).scrollTop();
                if(scrollTop>0){
                    $('.hid-span').css('display','block')
                }else{
                    $('.hid-span').css('display','none')
                }
            });
            $('.hid-span').click(function () {
                scrollTo(0,0);
            })
        });

    </script>
</div>